<template>
 <a-card 
  :bordered="false" 
  class="userinfo-card">
  <CrudTable
    :columns="columns"
    :fetchData="fetchData"
    :searchForm="searchForm">
    <template #createTimeSlot="{ data }">
      <a-range-picker show-time v-model="data.createTime" allow-clear/>
    </template>
    <template #pushPlanSlot="{ data }">
      <a-input v-model="data.fuzzy_search" placeholder="请输入内容" allow-clear/>
    </template>

  </CrudTable>
 </a-card>
</template>

<script setup lang="ts">
import { ref , reactive } from 'vue'
import dayjs from 'dayjs';
import { isUndefined, isNull } from 'lodash';
import { getProductStatistics } from '@/api/financialStatistics'
import { getCurrentDate, getCurrentNextDayDate } from '@/utils/dateUtil';
let starTime = getCurrentDate()
let endTime = getCurrentNextDayDate();

let searchForm = ref([
    { 
      field: 'createTime', 
      span: 6, 
      slots: {
        default: 'createTimeSlot'
      },
      defaultValue: [
        `${starTime}`, 
        `${endTime}`
      ],
    },
    { 
      field: 'fuzzy_search', 
      title: '推送计划', 
      span: 5, 
      slots: {
        default: 'pushPlanSlot'
      } 
    }
])

const columns = [
  {
    title: '日期',
    align: 'center',
    dataIndex: 'date',
  },
  {
    title: '推送计划',
    align: 'center',
    dataIndex: 'plan_name',
  },
  {
    title: '进件数量',
    align: 'center',
    dataIndex: 'product_clue_num',
  }
];


const fetchData = ({ page, size, query }) : any=>{
   let start_time: string = '';
   let end_time: string = '';
   const { createTime, fuzzy_search } = query;
   if(!isUndefined(createTime) && !isNull(createTime)){
      let [startTime, endTime ] = createTime;
      start_time = String(dayjs(startTime).valueOf() / 1000);
      end_time = String(dayjs(endTime).valueOf() / 1000);
   }

  return getProductStatistics({ 
    page, size, start_time, end_time, fuzzy_search
  });
}



</script>

<style scoped lang='less'>

</style>